<template>
	<div class="navbar">
		<van-nav-bar
		  :title="title"
		  :left-arrow="isArrow"
			fixed
			placeholder 
		  @click-left="onClickLeft"
		  @click-right="onClickRight"
		>
			<template #right>
				<div class="right-text">{{rightTitle}}</div>
			</template>
		</van-nav-bar>
		
	</div>
</template>

<script>
	export default {
		props: {
			isArrow: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '标题'
			},
			rightTitle: {
				type: String,
				default: '按钮'
			}
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			onClickRight() {
				this.$emit('right')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar{
		/deep/ .van-nav-bar{
			background-color: #ee0a24;
			.van-nav-bar__left{
				.van-icon {
					color: #fff;
				}
			}
			.van-nav-bar__title{
				color: #fff;
			}
			.van-nav-bar__right{
				.right-text{
					color: #fff;
				}
			}
		}
	}
</style>